<template>
  <div class="commentcell">
      <!-- 引用自身组件 组件递归 先使用name注册 -->
      <commentcell :parent="parent.parent" v-if="parent.parent" @clickReply="sendComment"></commentcell>
      <div class="top">
          <span>{{parent.user.nickname}}</span>
          <span>2分钟</span>
          <span @click="sendComment(parent)">回复</span>
      </div>
      <div class="bottom">
          {{parent.content}}
      </div>
  </div>
</template>
//?组件内回复评论
//?点击直属的子组件的回复按钮 发起事件传递当前要评论的对象  父组件监听
//!递归内回复评论
//!点击递归生成的评论回复（非直属子组件）打印数据可知 子组件已经发出事件 但没有弹窗 说明递归的监听事件也是需要层层监听的
<script>
export default {
    name:'commentcell',
    props:['parent'],
    methods: {
        sendComment(parent) {
            console.log(parent);
            this.$emit('clickReply',parent)
        }
    }
}
</script>

<style lang="less" scoped>
    .commentcell {
        border: 1px solid #ccc;
        padding: 5px;
        line-height: 20px;
        .top {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
        }
        .bottom {
            margin-top: 5px;
            font-size: 13px;
            color: #333;
        }
    }
</style>